<template>
  <div class="addstage">
    <el-dialog
      :visible.sync="dialog"
      :before-close="handleClose"
      title="添加课程"
      width="980px"
      class="unique"
    >
      <div class="search-wrap">
        <el-cascader
          v-model="Course.categoryId"
          :options="courseCategorys"
          :props="{ multiple: true, checkStrictly: true }"
          @change="getCourseList()"
          clearable
        ></el-cascader>
        <el-input v-model="listQuery.name" style="width:140px;" placeholder="课程名" />
        <el-button type="primary" icon="el-icon-search" @click="getCourseList()">搜索</el-button>
        <el-button size="medium" type="info" @click="clearParams">清空</el-button>
      </div>
      <div class="list-wrap">
        <ul class="detail-learn-subject">
          <template
            v-for="(item,index) in courseList.slice((currentPage-1)*pageSize,currentPage*pageSize)"
          >
            <li :key="index" class="detail-learn-subject-list">
              <el-row :gutter="20">
                <el-col :span="5">
                  <img :src="item.largePicture" alt style="width:100%;height:100%;" />
                </el-col>
                <el-col :span="13">
                  <span class="content-title">{{ item.title }}</span>
                  <p style="color:#c6c6c7">{{ item.title }}</p>
                  <span
                    :style="item.type=== '录播'? recordWay: onWay"
                    class="content-way"
                  >{{ item.type }}</span>
                </el-col>
                <el-col :span="6">
                  <div class="right-wrap">
                    <div class="class-checkbox">
                      <el-checkbox
                        v-model="item.checked"
                        @change="getCourseChecked(item.value)"
                      />
                    </div>
                    <div class="class-detail">课时: {{ item.lessonNum }}</div>
                  </div>
                </el-col>
              </el-row>
            </li>
          </template>
        </ul>
        <el-pagination
          :current-page.sync="currentPage"
          :page-size="pageSize"
          :total="total"
          background
          layout="total, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="saveClassRoomAndCourse()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { categoryList, courseList } from '@/api/user/user' // 数据接口
import { getTenantId } from '@/utils/auth'
import { saveClassRoomCourses } from '@/api/subject/classroom' // 数据接口

export default {
  inject: ['reload'],
  props: {
    visibleDialog: {
      type: Boolean,
      default: false
    },
    statusId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      courseCheckedIds: [],
      EduxcloudClassroomCourses: {
        classRoomId: '',
        courseIds: '',
        tenantId: ''
      },
      Course: {
        categoryId: ''
      },
      courseCategorys: [],
      currentPage: 1,
      pageSize: 4,
      listQuery: {
        parent: '',
        children: '',
        name: ''
      },
      option1: [],
      option2: [],
      courseList: [],
      recordWay: { backgroundColor: '#f89e29' },
      onWay: { backgroundColor: '#4297ff' },
      EduUserVo: {}
    }
  },
  computed: {
    dialog() {
      return this.visibleDialog
    },
    total() {
      return this.courseList.length
    }
  },
  mounted() {
    this.getCourseList()
    this.getCourseCategorys()
    this.handleCurrentChange(1)
  },
  methods: {
    handleClose() {
      this.$emit('closeAddClass')
      this.courseList.map(data => {
        if (data.checked === true) {
          data.checked = false
        }
      })
    },
    handlePush() {
      this.$emit('closeAddClass')
    },
    handleCurrentChange(val) {
      if(val) {
      this.currentPage = val
      }
      let newList = this.courseList.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      )
      let status = newList.indexOf('checked')
      newList.map(res => {
        if (res.checked) {
        } else {
          this.$set(res, 'checked', false)
        }
      })
      // this.$forceUpdate()
    },
    getCourseChecked(val) {
      this.courseCheckedIds.push(val)
    },
    clearParams() {
      this.Course.categoryId = ''
      this.listQuery.name = ''
      this.getCourseList()
    },
    getCourseCategorys() {
      categoryList('course', getTenantId())
        .then(response => {
          console.log(response.data.items)
          this.courseCategorys = response.data.items
        })
        .catch(() => {})
    },
    getCourseList() {
      if (this.Course.categoryId.length > 0) {
        this.EduUserVo.tenantId = getTenantId()
        this.EduUserVo.categoryId = this.Course.categoryId.join(',')
        this.EduUserVo.name = this.listQuery.name
        courseList(this.EduUserVo)
          .then(response => {
            this.courseList = response.data.items
            this.courseList.map(item => {
              if (item.type === 'normal') item.type = '录播'
              if (item.type === 'live') item.type = '直播'
              if (item.type === 'open') item.type = '公开课'
              if (item.type === 'liveOpen') item.type = '公开课'
            })
          })
          .catch(() => {})
      } else {
        this.EduUserVo.tenantId = getTenantId()
        this.EduUserVo.categoryId = 0
        this.EduUserVo.name = this.listQuery.name
        courseList(this.EduUserVo)
          .then(response => {
            console.log(response.data.items)
            this.courseList = response.data.items
            this.courseList.map(item => {
              if (item.type === 'normal') item.type = '录播'
              if (item.type === 'live') item.type = '直播'
              if (item.type === 'open') item.type = '公开课'
              if (item.type === 'liveOpen') item.type = '公开课'
            })
          })
          .catch(() => {})
      }
    },
    saveClassRoomAndCourse() {
      this.EduxcloudClassroomCourses.classRoomId = this.statusId
      this.EduxcloudClassroomCourses.courseIds = this.courseCheckedIds.join(',')
      this.EduxcloudClassroomCourses.tenantId = getTenantId()
      saveClassRoomCourses(this.EduxcloudClassroomCourses).then(() => {
        this.$notify({
          title: '成功',
          message: '添加成功',
          type: 'success',
          duration: 2000
        })
        this.$emit('closeDialog', false)
      })

      this.courseList.map(data => {
        if (data.checked === true) {
          data.checked = false
        }
      })
    }
  }
}
</script>

<style lang="scss">
.addstage {
  .el-dialog {
    border-radius: 5px;

    .search-wrap {
      margin-bottom: 20px;
    }

    .list-wrap {
      .detail-learn-subject {
        padding: 0 25px;
        margin: 0;
        width: 100%;
        list-style: none;

        &-list {
          height: 120px;
          padding: 10px 10px 24px 10px;
          border: 1px solid #dcdfe6;
          border-radius: 3px;
          margin-bottom: 20px;

          .el-col {
            height: 100px;
            position: relative;

            span.content-way {
              position: absolute;
              bottom: 5px;
              color: #fff;
              font-size: 14px;
              padding: 5px 20px;
            }

            .right-wrap {
              width: 100%;
              height: 100%;
              position: relative;

              .class-checkbox {
                font-size: 20px;
                position: absolute;
                right: 0;
                cursor: pointer;
              }

              .class-detail {
                position: absolute;
                right: 0;
                bottom: 10px;

                .el-checkbox__label {
                  color: #3d3d3d;
                  font-size: 18px;
                }
              }
            }
          }

          .content-title {
            color: #3d3d3d;
            font-size: 16px;
          }

          p {
            margin: 0;
            margin-top: 5px;
            font-size: 14px;
            color: #8a8b8c;
          }
        }
      }
    }
  }

  .unique {
    /deep/ .el-dialog__body {
      padding: 10px 20px;

      div ul li.detail-learn-subject-list {
        margin-bottom: 10px;
      }
    }
  }
}
</style>
